<template>
	<div class="setting-system">
		<section class="sys-list" v-show="showStatus">
			<div class="sys-item">
				<a class="color1">
					<el-icon color="#0052CC"><ele-Notification /></el-icon>
					<p>日志审计</p>
				</a>
			</div>
			<div class="sys-item">
				<a class="color2">
					<el-icon color="#13ce66"><ele-Monitor /></el-icon>
					<p>内网监控</p>
				</a>
			</div>
			<div class="sys-item">
				<a class="color3">
					<el-icon color="#909399"><ele-Compass /></el-icon>
					<p>资产探查</p>
				</a>
			</div>
			<div class="sys-item">
				<a class="color4">
					<el-icon color="#fd4e4e"><ele-Printer /></el-icon>
					<p>主机扫描</p>
				</a>
			</div>
		</section>
		<div class="concat-us">
			<a class="color5">
				<el-icon color="#e6a23c"><ele-Headset /></el-icon>
				<p>服务支撑</p>
			</a>
			<div class="wx-ma">
				<img src="@/assets/asset/wx-ma.png" />
			</div>
		</div>
		<div class="show-hide-box" @click="showStatus = !showStatus">
			<a class="color1">
				<el-icon color="#0052CC" :class="showStatus ? 'deg-90' : 'deg90'"><ele-DArrowRight /></el-icon>
				<p>{{ showStatus ? '收起浮窗' : '展开浮窗' }}</p>
			</a>
		</div>
	</div>
</template>
<script setup>
const showStatus = ref(true)
</script>
<style lang="scss" scoped>
.concat-us {
	position: relative;
	cursor: pointer;
	.wx-ma {
		display: none;
		width: 200px;
		height: 200px;
		background-color: #fff;
		border-radius: 4px;
		position: absolute;
		right: 80px;
		top: -50px;
		box-shadow: 0 0 50px rgba(82, 63, 105, 0.149);
		padding: 15px;
		img {
			width: 100%;
		}
	}
	&:hover {
		.wx-ma {
			display: inline-block;
		}
	}
}
.setting-system {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: calc(9999 + 100);
	padding: 10px 0 0;
	margin: 0;
	text-align: center;
	cursor: pointer;
	background-color: #fff;
	border-top: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: 0 0 50px rgba(82, 63, 105, 0.149);
	transform: translateY(-50%);
	.deg-90 {
		transform: rotate(-90deg);
	}
	.deg90 {
		transform: rotate(90deg);
	}
	div {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 8px 8px 8px;
		margin: 0;
		list-style: none;
		a {
			display: inline-block;
			width: 55px;
			height: 55px;
			padding-top: 10px;
			text-align: center;
			border-radius: 5px;
			font-size: 15px;
		}
		a.color1 {
			color: #0052cc;
			background-color: rgba(0, 82, 204, 0.1);
		}
		a.color2 {
			color: #13ce66;
			background-color: rgba(19, 206, 102, 0.15);
		}
		a.color3 {
			color: #909399;
			background-color: rgba(144, 147, 153, 0.15);
		}
		a.color4 {
			color: #fd4e4e;
			background-color: rgba(253, 78, 78, 0.15);
		}
		a.color5 {
			color: #e6a23c;
			background-color: rgba(230, 162, 60, 0.15);
		}
		p {
			padding: 0;
			margin: 0;
			overflow: hidden;
			font-size: 12px;
			line-height: 22px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
